<template>
	<!-- 搜索组件 -->
	<view class="search">
		<view class="sea-nav">
			<u-search :placeholder="inpTitle" v-model="keyword" :clearabled="true" :show-action="true" action-text="取消" @custom="toBack"></u-search>
		</view>
		<!-- 热门搜索 -->
		<view class="re-search">
			<view>热门搜索</view>
			<view class="re-list">
				<view class="re-item" v-for="(item,index) in reMen" :key="index" @click="reMenAct(index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 最近搜索 -->
		<view class="zj-search">
			<view class="zj-title">
				<view>最近搜索</view>
				<image src="/static/index/003.png" mode="" @click="showDel"></image>
			</view>
			<view class="zj-content">
				<view class="zj-con" v-for="(item,index) in zuiJin" :key="index">
					<view class="zj-con_left">{{item}}</view>
					<view class="zj-con_right"><image v-show="show" src="/static/index/tui.png" mode="" @click="del(index)"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'search',
		props:{
			inpTitle:{
				type:String,
				default(){
					return ''
				}
			},
			reMen:{
				type:Array,
				default(){
					return []
				}
			},
			zuiJin:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				keyword:'',  //输入框的值
				show:false,
			}
		},
		methods: {
			toBack(){ //返回上一级
				uni.navigateBack(-1)
			},
			reMenAct(index){ //将热门搜索的值传给搜索框
				//console.log(index)
				this.keyword = this.reMen[index]
			},
			showDel(){  //控制最近搜索删除按钮的显示隐藏
				this.show =! this.show
			},
			del(index){  //最近搜索删除功能
				//console.log(index)
				this.zuiJin.splice(index,1)
			}
		}
	}
</script>

<style scoped lang="scss">
.search{
	background: #F0F0F0;
	width: 750rpx;
	height: 1334rpx;
	.sea-nav{
		width: 750rpx;
		height: 178rpx;
		background: #FFFFFF;
		padding: 87rpx 34rpx 0;
		box-sizing: border-box;
	}
	.re-search{
		padding: 36rpx;
		view{
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #939393;
		}
		.re-list{
			margin-top: 8rpx;
			display: flex;
			flex-wrap: wrap;
			// background-color: #18B566;
			.re-item{
				background: #D6D6D6;
				border-radius: 4rpx;
				color: #000000;
				display:inline-block;
				display:inline;
				zoom:1;
				padding:5rpx 15rpx ;
				margin-right: 28rpx;
				margin-top: 20rpx;
			}
		}
	}
	.zj-search{
		padding: 36rpx;
		.zj-title{
			display: flex;
			justify-content: space-between;
			view{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #939393;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.zj-content{
			padding: 20rpx;
			.zj-con{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				.zj-con_right{
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
}
</style>